.award {
  width: 100vw;
  height: 100vh;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .title {
    position: absolute;
    left: 50%;
    top: 4%;
    width: 75%;
    transform: translateX(-50%);
  }
  .sub-title {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%, 0);
    width: 75%;
    z-index: 9;
  }
  .main {
    position: absolute;
    left: 0;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 22%;
    border: 2px solid #000;
    background-color: #ffc4cc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    > text {
      line-height: 2;
    }
    view {
      font-size: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #ffa7b3;
      padding: 5px 20px;
      border-radius: 15px;
    }
    .medal {
      position: absolute;
      left: 3%;
      bottom: 0;
      transform: translateY(30%);
      width: 12%;
    }
    .next {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 175%);
      width: 60%;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 100%);
      width: 4px;
      height: 30px;
      background-color: #000;
    }
  }
  .main2 {
    position: absolute;
    left: 0;
    top: 23%;
    width: 100%;
    height: 77%;
    .content {
      position: relative;
      width: 100%;
      height: 77%;
      .main2-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .award-info {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin-top: 14%;
        width: 100%;
        .top {
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          font-weight: bold;
          text {
            margin: 0 20px;
          }
          .award-name {
            color: #fff;
          }
        }
        .entity {
          width: 25%;
          margin-top: 3%;
          margin-left: 35%;
        }
      }
      .info {
        position: absolute;
        left: 50%;
        top: 46%;
        width: 85%;
        transform: translateX(-50%);
        border: 2px solid #000;
        font-weight: bold;
        background-color: #ffc3cb;
        padding: 4px 10px;
        .info-title {
          text-align: center;
          line-height: 1.6;
          font-size: 18px;
        }
        .user-info {
          display: flex;
          flex-direction: column;
          view {
            line-height: 1.7;
            display: flex;
            align-items: center;
            input {
              flex: 1;
              margin-left: 10px;
            }
          }
        }
        .submit {
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 267rpx;
          height: 71rpx;
          transform: translate(-50%, 150%);
          padding: 0;
          margin: 0;
          .commit {
            width: 100%;
            height: 100%;
          }
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 100%);
          width: 4px;
          height: 20px;
          background-color: #000;
        }
      }
    }
    .careful {
      display: flex;
      flex-direction: column;
      width: 85%;
      margin: 10px auto 0;
      text {
        font-size: 11px;
        line-height: 1.6;
      }
    }
  }
}
